<template>
  <header>
    <el-input
      v-model="keyword"
      placeholder="请输入"
      maxlength="10"
      clearable
      style="width: 200px; margin-right: 10px"
      :prefix-icon="Search"
    />

    <el-button type="primary" @click="getUserList">搜索</el-button>
    <el-button type="primary" @click="addUserBtn">新增用户</el-button>
  </header>

  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="age" label="年龄" width="120" />
    <el-table-column label="操作" width="150" align="center">
      <template #default="scope">
        <el-button link type="primary" @click="lookBtn(scope.row)">
          查看
        </el-button>
        <el-button link type="primary" @click="editBtn(scope.row)">
          编辑
        </el-button>
        <el-button link type="primary" @click="deleteBtn(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size="pageSize"
    :total="total"
    @current-change="pageChange"
  />

  <el-dialog v-model="dialogVisible" title="用户信息" width="30%">
    <el-form :model="form">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.desc" />
      </el-form-item>
      <!-- <el-form-item label="Activity zone">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="confirmBtn">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import {
  getAllUser,
  getUserById,
  createUser,
  updateUser,
  deleteUser
} from '@/api/userManage'
// import { useQuery } from '@vue/apollo-composable'
// import gql from 'graphql-tag'
import Accounts from './api.graphql'

// 获取实例
const { proxy } = getCurrentInstance() as any
console.log(12, proxy.$apollo)

const keyword = ref<string>('')
const page = ref<number>(1)
const pageSize = ref<number>(3)
const total = ref<number>(0)

interface formType {
  id?: number | null
  name: string
  desc: string
}
const form = reactive<formType>({
  id: null,
  name: '',
  desc: ''
})

const editBtn = (row: tableDataType) => {
  console.log('click')
  form.id = row.id
  form.name = row.name
  form.desc = row.desc
  dialogVisible.value = true
}
const deleteBtn = async (row: tableDataType) => {
  console.log('click')
  await deleteUser({ id: row.id })
  await getUserList()
}

interface tableDataType {
  id: number
  name: string
  desc: string
}
const tableData = ref<tableDataType[]>([])

// const { result } = useQuery(
//   gql`
//     query Accounts($searchAccountsInput: SearchAccountsInput) {
//       accounts(searchAccountsInput: $searchAccountsInput) {
//         data {
//           age
//           department
//           id
//           name
//           sex
//         }
//         total
//       }
//     }
//   `,
//   { searchAccountsInput: variables }
// )

const getUserList = async () => {
  const {
    data: { accounts }
  } = await proxy.$apollo.query({
    query: Accounts,
    variables: {
      searchAccountsInput: {
        keyword: keyword.value,
        page: page.value,
        pageSize: pageSize.value
      }
    }
  })
  tableData.value = accounts.data
  total.value = accounts.total
}
getUserList()

const pageChange = (currentPage: number) => {
  page.value = currentPage
  getUserList()
}

const resetForm = reactive({ ...form })

const addUserBtn = () => {
  Object.assign(form, resetForm)
  console.log(444, form)

  dialogVisible.value = true
}
const confirmBtn = async () => {
  if (form.id) {
    await updateUser(form)
  } else {
    await createUser(form)
  }

  await getUserList()
  dialogVisible.value = false
}

const lookBtn = async (row: tableDataType) => {
  const res: any = await getUserById({ id: row.id })
  form.id = res.id
  form.name = res.name
  form.desc = res.desc
  dialogVisible.value = true
}

const dialogVisible = ref(false)
</script>
